<template>
  <div className="com-container" style="height: 500px">
    <div className="com-chart" ref="read_ref" style="height:100%"></div>
  </div>
</template>

<script>
  // 引入echarts
  import * as echarts from 'echarts';

  export default {
// 这里没有watch函数
    mounted() {
      this.getDate()
      // 这里删除了一个方法
      this.initChart()
      // 在这里的getData中只调用了updataChart方法
      this.getData()
      // 页面加载完成时 主动完成页面的适配
      this.screenAdapter()
      // window自适应方法
    },
    // 这里缺少一个东西，props
    data() {
      return {
        datax: [],
        datay: [],
        col: [],
        data: [],
        charInstance: null,
        allData: null,
        // 这里缺少解释数据功能
      }
    },
    // destroyed方法，在组件销毁时，取消监听
    methods: {
      getDate() {
        this.$axios.get('/charge/findAll').then((res) => {
          console.log(res)
          this.data = res.data
          const dat = res.data
          console.log(dat)
          for (const s in dat) {
            this.datax.push(dat[s].charge)
            // console.log('======'+ dat[s].color)
            var cl = { value: '',
              itemStyle:{
                color: ""
              }
            }
            cl.value = dat[s].number
            cl.itemStyle.color = this.judge(dat[s].charge)
            this.datay.push(cl)

            // this.datay[6].style={
            //   color2 : "red"
            // }
          }
          // this.datay[8].color = "red"
          this.charInstance.setOption({
            xAxis: {
              data: this.datax
            },
            series: [{
              name: "数量",
              data: this.datay
              // type: 'line'
            }]
          })
          console.log(this.data)
        }).catch((error) => {
          console.log(error)
        })
      },
      // 这里缺少huoqujiexi方法，用来获取解析传过来的数据
      // 缺少chartdata方法，用来处理Y轴的数据
      initChart() {
        this.charInstance = echarts.init(this.$refs.read_ref)
        const initOption = {
          xAxis: {
            type: 'category'
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'bar'
          }]
        }
        this.charInstance.setOption(initOption)
      },
      // 获取服务器数据，实现异步加载
      async getData() {
        // await this.$http.get()
        // 对allData进行赋值
        this.updateChart()
      },
      // 更新图表
      updateChart() {
        // 处理数据
        const dataOption = {
          title: {
            text: '柱状图',
            padding: 15,
            textStyle: {
              fontSize: 18,
              fontWeight: 400,
              color: '#656464'
            }
          },
          //color: '#328BBA',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              saveAsImage: {},
              restore: {}
            },
            right: '4%'
          },
          // 区域缩放
          dataZoom: [
            {
              type: 'slider', //slider(滑块)、inside(内置，依靠鼠标滚轮或者双指缩放)
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 100
            },
            {
              type: 'inside', //slider(滑块)、inside(内置，依靠鼠标滚轮或者双指缩放)
              xAxisIndex: [0],
              start: 0,
              end: 50
            }
          ],
          // 缺少一个legend，咱也不知道干嘛的
          // x轴数据
          // xAxis: {
          //
          //   // this.data["color"]
          //   data: ['青', '绿', '紫', '黄', '灰', '粉', '蓝', '白', '红', '黑']
          // },
          // // 这里没有yAxis，问题不大
          // // 这里使用的是我自己的serise，也就是数据，用于显示在Y轴
          // series: [{
          //   data: [1614,1972,2480,2755,3899,4957,9176,9999,11534,29763],
          // // type: 'line'
          // }]
        }
        // 数据加载完成后就建立
        this.charInstance.setOption(dataOption)
      },
      // 当浏览器的大小发生变化时，会调用的方法，来完成屏幕的适应
      screenAdapter() {
        const adapterOption = {}
        this.charInstance.setOption(adapterOption)
        this.charInstance.resize()
      },
      judge(temp_col) {
        if (temp_col === "教研业绩量化"){
          return "cyan"
        }
        else if (temp_col === "教材业绩量化"){
          return "pink"
        }
        else if (temp_col === "自然科学科研业绩量化"){
          return "#cfcfcf"
        }
      }
    }
  }

</script>

<style lang='less' scoped>

</style>
